<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui"
      xmlns:f="http://java.sun.com/jsf/core">

    <ui:composition template="layout.xhtml">
        <ui:define name="title">
            <h2><a href="#" class="back" onclick="history.go(-1)"/>Cadastrar Cliente</h2>
        </ui:define>
        <ui:define name="body">
            <h:form id="clienteForm" enctype="multipart/form-data">            
                <p:messages id="messages" closable="true" showDetail="true" autoUpdate="true"  />
                <p:panel id="dadosGeraisPanel" styleClass="container_24 clearfix">
                    <h2>Dados Gerais</h2>

                    <p:outputLabel id="personOutputLabel" value="Pessoa:" 
                                   for="personRadioButton"
                                   styleClass="grid_3" style="top: 6px" />
                    <div class="grid_8 divSelectOneMenu">
                        <p:selectOneRadio id="personRadioButton" value="#{managerCriarCliente.cliente.tipoDocumento}" >
                            <f:selectItems value="#{managerCriarCliente.tipoDocumento}" />
                            <p:ajax event="change" update="@form" />
                        </p:selectOneRadio>
                    </div>
                    <div class="clear"/>

                    <p:outputLabel value="#{managerCriarCliente.pessoaFisica ? 'CPF:' : 'CNPJ:'}" 
                                   styleClass="grid_3" for="cpfCnpjInputMask"/>
                    <p:inputMask id="cpfCnpjInputMask"
                                 value="#{managerCriarCliente.pessoaFisica ? managerCriarCliente.cliente.cpf : managerCriarCliente.cliente.cnpj}" 
                                 styleClass="grid_8" mask="#{managerCriarCliente.pessoaFisica ? '999.999.999-99':'99.999.999/9999-99'}" 
                                 autocomplete="false" required="true">
                        <p:ajax event="blur" update=":clienteForm:dadosGeraisPanel"
                                listener="#{managerCriarCliente.existeCliente()}" />
                    </p:inputMask>
                    <div class="clear"/>

                    <p:outputLabel value="#{managerCriarCliente.pessoaFisica ? 'Nome:' : 'Nome Fantasia:'}" 
                                   styleClass="#{managerCriarCliente.pessoaFisica ? '' : 'nomeFantasiaLabel '} grid_3" 
                                   for="nomeInputText"/>
                    <p:inputText id="nomeInputText" 
                                 value="#{managerCriarCliente.pessoaFisica ? managerCriarCliente.cliente.nome : managerCriarCliente.cliente.nomeFantasia}" 
                                 styleClass="grid_20" required="true"
                                 readonly="#{managerCriarCliente.cliente.id ne null}" />
                    <div class="#{managerCriarCliente.pessoaFisica ? 'clear' : ''}"/>

                    <p:outputLabel value="Nome da mãe:" styleClass="grid_3" 
                                   for="nomeMaeInputText" rendered="#{managerCriarCliente.pessoaFisica}" />
                    <p:inputText id="nomeMaeInputText"
                                 value="#{managerCriarCliente.cliente.nomeMae}" 
                                 styleClass="grid_20" rendered="#{managerCriarCliente.pessoaFisica}" 
                                 readonly="#{managerCriarCliente.cliente.id ne null}" />

                    <div class="#{managerCriarCliente.pessoaFisica ? 'clear' : ''}"/>
                    <p:outputLabel value="RG:" styleClass="grid_3" 
                                   rendered="#{managerCriarCliente.pessoaFisica}"/> 
                    <p:inputText styleClass="grid_8" value="#{managerCriarCliente.cliente.rg}" 
                                 rendered="#{managerCriarCliente.pessoaFisica}" 
                                 readonly="#{managerCriarCliente.cliente.id ne null}"/>

                    <p:outputLabel value="Data Nasc.:" styleClass="grid_4" 
                                   for="dataNascCalendar" rendered="#{managerCriarCliente.pessoaFisica}" />
                    <p:calendar id="dataNascCalendar" value="#{managerCriarCliente.cliente.dataNascimento}"
                                rendered="#{managerCriarCliente.pessoaFisica and managerCriarCliente.cliente.id eq null}"
                                showOn="both" locale="pt" yearRange="1700:2100" 
                                navigator="true" pattern="dd/MM/yyyy" styleClass="grid_9" />
                    <div class="grid_9">
                        <p:inputText id="dataNascInputText" value="#{managerCriarCliente.cliente.dataNascimento}"
                                     style="width: 90%" readonly="true"
                                     rendered="#{managerCriarCliente.pessoaFisica and managerCriarCliente.cliente.id ne null}">
                            <f:convertDateTime pattern="dd/MM/yyyy"/>
                        </p:inputText>
                    </div>
                    <div class="clear"/>

                </p:panel> 

                <p:panel id="bancosPanel" styleClass="container_24 clearfix">
                    <h2>Bancos</h2>
                    <p:outputLabel value="Banco:" styleClass="grid_3" for="tipoBancoSelectOneMenu" >
                        <span class="ui-outputlabel-rfi required">*</span>
                    </p:outputLabel>
                    <div class="grid_20" style="margin-left: 2px">
                        <p:selectOneMenu id="tipoBancoSelectOneMenu" 
                                         styleClass="grid_23"
                                         value="#{managerCriarCliente.banco.tipoBanco}" >
                            <f:selectItem itemLabel="" itemValue="" />
                            <f:selectItems value="#{managerCriarCliente.tipoBanco}" />
                        </p:selectOneMenu>
                    </div>
                    <div class="clear" />

                    <p:outputLabel value="Agência:" styleClass="grid_3" for="agInputText" >
                        <span class="ui-outputlabel-rfi required">*</span>
                    </p:outputLabel>
                    <p:inputText id="agInputText" styleClass="grid_8" value="#{managerCriarCliente.banco.agencia}" />

                    <p:outputLabel value="Conta:" styleClass="grid_4" for="contaInputText" >
                        <span class="ui-outputlabel-rfi required">*</span>
                    </p:outputLabel>
                    <div class="grid_9" >
                        <p:inputText id="contaInputText" styleClass="grid_22" value="#{managerCriarCliente.banco.conta}" />
                    </div>
                    <div class="clear" /><br/>

                    <div class="buttonAction">
                        <p:commandButton value="Adicionar"
                                         process="bancosPanel"
                                         actionListener="#{managerCriarCliente.adicionarBanco()}"
                                         update="bancosPanel, bancosTable"
                                         id="adicionarBancoCommandButton" icon="ui-icon-plus"/>
                    </div>
                    <br />

                    <p:dataTable id="bancosTable" var="item" value="#{managerCriarCliente.bancos}" 
                                 styleClass="grid_24" emptyMessage="Nenhum registro">  
                        <f:facet name="header">
                            Bancos
                        </f:facet>

                        <p:column headerText="Ação" width="50">
                            <p:commandButton  styleClass="optionButton" alt="Editar" 
                                              update=":clienteForm:bancosPanel, bancosTable"
                                              process="@this" icon="ui-icon-pencil" rendered="#{item.id eq null}"
                                              actionListener="#{managerCriarCliente.editarBanco(item)}" />
                            <p:commandButton  styleClass="optionButton" alt="Remover"
                                              update="bancosTable"
                                              process="@this" icon="ui-icon-trash"
                                              actionListener="#{managerCriarCliente.removerBanco(item)}" />
                        </p:column>

                        <p:column headerText="Nome">  
                            #{item.tipoBanco.nome}
                        </p:column>

                        <p:column headerText="Agência">  
                            #{item.agencia}
                        </p:column> 

                        <p:column headerText="Conta">  
                            #{item.conta}
                        </p:column> 

                    </p:dataTable>

                </p:panel>

                <div class="buttonAction">
                    <p:commandButton value="Salvar" actionListener="#{managerCriarCliente.salvar()}"
                                     icon="ui-icon-disk" styleClass="ui-priority-primary"
                                     update="@form"/>
                    <p:button value="Cancelar" icon="ui-icon-circle-close"
                              href="indexcliente.xhtml" />
                </div>
            </h:form>

            <script language="JavaScript" type="text/javascript">
                function required(rqd){
                    if(rqd){
                        $('#clienteForm\\:bancosPanel .ui-outputlabel').each(function() {
                            var id = $(this).attr('for').replace(':', '\\:');
                            /* <![CDATA[ */
                            if ($(this).children('span').hasClass('required') && ($('#' + id).val() == '')) {
                                $(this).addClass('ui-state-error');
                                $('#' + id).addClass('ui-state-error');
                            }
                            /* ]]> */
                        });
                    }else{
                        $('#clienteForm\\:bancosPanel').children().removeClass('ui-state-error');
                    }
                }
                
            </script>

        </ui:define>
    </ui:composition>
</html>


